<template>
  <div style="margin-right: 10px;" @mouseenter="isActive=true" @mouseleave="isActive=false">
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue'
import http from '../../../../axios/http';
export default {
  data () {
    return {
      cdata: {
        category: [
        ],
        barData: [
        ],
        rateData: [
        ]
      },
      isActive: false
    };
  },
  components: {
    Chart,
  },
  mounted () {
    // this.setData();
    this.get_centerData();
    setInterval(()=>{
      this.updateData()
    },3000)
  },
  methods: {
    get_centerData(){
      http.get('/largescreen/bottomleft/').then(response=>{
        this.cdata = {
          category: response.data.carname_list.slice(0,15),
          barData: response.data.carcount_list.slice(0,15),
          rateData: response.data.caravgprice_list.slice(0,15),
        }
      }).catch(error=>{
        console.log(error)
      })
    },
    // 修改数组 将前一个值复制给后一个值 第一个值放在列表末尾 实现轮播
    changeData(list){
      var v = list[0]
      for (let i = 0; i < list.length-1; i++) {
        list[i] = list[i+1]
      }
      list[list.length-1] = v
      return list
    },
    // 将生成的新数组 渲染给Echarts
    updateData(){
      if (this.isActive === false) {
        this.cdata = {
          category: this.changeData(this.cdata.category),
          barData: this.changeData(this.cdata.barData),
          rateData:this.changeData(this.cdata.rateData)
        }
      }
    },
  }
};
</script>

<style lang="scss" scoped>
</style>